﻿@page
@model FytSoa.Web.Pages.FytAdmin.Shop.GoodsModel
@{
    ViewData["Title"] = "商品管理";
    Layout = AdminLayout.Pjax(HttpContext);
}
<div id="container">
    <style>
        .layui-col-220 {
            width: 240px;
            background-color: #ffffff;
            border-right: 8px solid #f1f4f5;
        }

            .layui-col-220 .layui-nav-title {
                background-color: #ffffff;
                border-bottom: 1px solid #f1f4f5;
            }

        .right-col-body {
            left: 245px;
        }

        .v-tree {
            padding: 10px 0;
            overflow: auto;
        }

        .layui-tree-cus li {
            padding: 0px;
        }

        .layui-tree-cus ul li {
            padding-left: 25px;
            line-height: 30px;
        }

        .v-tree li > div {
            padding: 5px 15px 5px 25px;
        }

            .v-tree li > div a {
                display: block;
            }
        .layui-table-cell {
            height:auto;
        }
        .tab-img {
            height:60px;
            width:60px;
            border-radius:2px;
            margin-right:10px;
        }
        .layui-btn-danger, .layui-btn-danger:hover, .layui-btn-danger:focus {
            background-color: #FFB800;
        }
    </style>
    <div class="layui-col-220 picframe-wall soa-rtree" id="adv">
        <div class="layui-nav-title"><span>商品管理 </span></div>
        <div class="v-tree">
            <gtree class="item"
                   :list="list">
            </gtree>
        </div>
    </div>
    <div class="right-col-body" id="content-body">
        <div class="list-wall" style="padding-top:0px;">
            <div class="layui-form list-search" style="margin-top:10px;">
                <button type="button" class="layui-btn layui-btn-sm" data-type="toolAdd"><i class="layui-icon"></i> 添加商品</button>
                <button type="button" class="layui-btn layui-btn-sm" data-type="toolDel"><i class="layui-icon"></i> 删除</button>
                <div class="layui-inline" style="margin-left:15px;">
                    <div class="layui-btn-group">
                        <button type="button" class="layui-btn" onclick="fun.toolAudit(1)"><i class="layui-icon layui-icon-up"></i> 上架</button>
                        <button type="button" class="layui-btn" onclick="fun.toolAudit(0)"><i class="layui-icon layui-icon-down"></i> 下架</button>
                    </div>
                </div>
                <div class="layui-inline" style="margin-left:20px;">
                    <input class="layui-input" id="key" autocomplete="off" placeholder="请输入关键字查询">
                </div>
                <div class="layui-inline">
                    <select id="attr" lay-search="">
                        <option value="">商品属性</option>
                        <option value="IsTop">推荐</option>
                        <option value="IsHot">热点</option>
                        <option value="IsDelivery">包邮</option>
                        <option value="IsCoupon">优惠券使用</option>
                        <option value="IsDel">是否删除</option>
                        <option value="IsAudit">上架</option>
                        <option value="IsReturn">退换货</option>
                        <option value="IsFenXiao">分销</option>
                        <option value="IsDisCount">会员折扣</option>
                    </select>
                </div>
                <button type="button" class="layui-btn layui-btn-sm" data-type="toolSearch"><i class="layui-icon layui-icon-search"></i> 搜索</button>
            </div>
            <table class="layui-hide" id="tablist" lay-filter="tool"></table>
        </div>
    </div>
    <input type="hidden" id="isSave" value="0" />
    <script type="text/x-template" id="tree-template">
        <ul class="layui-tree-cus">
            <li v-for="(item, index) in list" :key="index">
                <div :class="{bold: isFolder}">
                    <a href="javascript:void(0)" @@click="getlist(item)">
                        <span v-if="isFolder && open" @@click="toggle"><i class="layui-icon layui-icon-subtraction"></i></span>
                        <span v-if="isFolder && !open" @@click="toggle"><i class="layui-icon layui-icon-addition"></i></span>
                        {{ item.name }}
                    </a>
                </div>
                <ul v-show="open" v-if="isFolder">
                    <gtree class="item" v-if="item.children.length>0" :list="item.children"></gtree>
                </ul>
            </li>
        </ul>
    </script>
    <script>
        Vue.component('gtree', {
            template: '#tree-template',
            props: {
                list: Array
            },
            data: function () {
                return {
                    open: true
                };
            },
            computed: {
                isFolder: function () {
                    return this.list[0].children &&
                        this.list[0].children.length;
                }
            },
            methods: {
                toggle: function () {
                    if (this.isFolder) {
                        this.open = !this.open;
                    }
                },
                getlist: function (m) {
                    vm.m = m;
                    active.reload();
                }
            }
        });
        var layuiIndex, active, fun, os, vm = new Vue({
            el: '#adv',
            data: {
                list: [],
                m: { id: 0 }
            },
            methods: {

            }
        });
        layui.config({
            base: '/themes/js/modules/'
        }).use(['layer', 'jquery', 'common', 'table', 'form'],
            function () {
                var layer = layui.layer,
                    table = layui.table,
                    $ = layui.jquery,
                    form = layui.form;
                os = layui.common;
                form.render();
                $(".v-tree").css({ height: $(window).height() - 153 });
                table.render({
                    elem: '#tablist',
                    headers: os.getToken(),
                    url: '/api/shop/goods/list',
                    cols: [
                        [
                            { type: 'checkbox', fixed: 'left' },
                            {
                                field: 'goodsName', title: '商品名称', fixed: 'left', templet: function (data) {
                                    return '<img class="tab-img" src="' + data.cover + '"  />' + data.goodsName;
                                }
                            },
                            { field: 'sort', width: 80, title: '排序' },
                            { field: 'salePrice', width: 80, title: '价格' },
                            { field: 'kcSum', width: 80, title: '库存' },
                            { field: 'xsSum', width: 100, title: '销售数量' },
                            {
                                field: 'isAudit', width: 100, title: '上架状态', templet: function (data) {
                                    if (data.isAudit) {
                                        return '<span class="layui-badge layui-bg-blue">上架</span>';
                                    } else {
                                        return '<span class="layui-badge">下架</span>';
                                    }
                                }
                            },
                            {
                                field: 'isAudit', width: 200, title: '属性', templet: function (data) {
                                    var str = '';
                                    if (data.isTop) {
                                        str+= '<span class="layui-badge layui-bg-blue">推荐</span>';
                                    } if (data.isRed) {
                                        str += '<span class="layui-badge layui-bg-green">热销</span>';
                                    } if (data.isDelivery) {
                                        str += '<span class="layui-badge layui-bg-cyan">包邮</span>';
                                    } if (data.isDel) {
                                        str += '<span class="layui-badge">删除</span>';
                                    } if (data.isFenXiao) {
                                        str += '<span class="layui-badge layui-bg-orange">分销</span>';
                                    } if (data.isDisCount) {
                                        str += '<span class="layui-badge layui-bg-black">会员折扣</span>';
                                    }
                                    return str;
                                }
                            },
                            { width: 100, title: '操作', templet: '#tool' }
                        ]
                    ],
                    page: true,
                    id: 'tables',
                    parseData: function (res) {
                        return {
                            "code": res.statusCode === 200 ? 0 : res.statusCode,
                            "msg": res.message,
                            "count": res.data.totalItems,
                            "data": res.data.items
                        };
                    }
                });
                fun = {
                    init: function () {
                        os.ajax('api/shop/column/tree', { id: 2 }, function (res) {
                            if (res.statusCode === 200) {
                                vm.list = res.data;
                               //console.log(vm.list);
                            } else {
                                os.error(res.message);
                            }
                        });
                    },
                    toolAudit: function (audit) {
                        //上下架操作
                        var checkStatus = table.checkStatus('tables')
                            , data = checkStatus.data;
                        if (data.length === 0) {
                            os.error("请选择要操作的项目~");
                            return;
                        }
                        var str = '';
                        $.each(data, function (i, item) {
                            str += item.guid + ",";
                        });
                        layer.confirm('确定要执行上下架操作吗？', function (index) {
                            layer.close(index);
                            os.load();
                            os.ajax('api/shop/goods/audit/', { guid: str, audit: audit }, function (res) {
                                os.loadClose();
                                if (res.statusCode === 200) {
                                    active.reload();
                                    os.success('执行成功！');
                                } else {
                                    os.error(res.message);
                                }
                            });
                        });
                    },
                };
                fun.init();

                active = {
                    reload: function () {
                        table.reload('tables',
                            {
                                page: {
                                    curr: 1
                                },
                                where: {
                                    id: vm.m.id,
                                    key: $('#key').val(),
                                    where:$('#attr').val()
                                }
                            });
                    },
                    toolSearch: function () {
                        active.reload();
                    },                    
                    toolAdd: function () {
                        active.goModify();
                    },
                    toolDel: function () {
                        var checkStatus = table.checkStatus('tables')
                            , data = checkStatus.data;
                        if (data.length === 0) {
                            os.error("请选择要删除的项目~");
                            return;
                        }
                        var str = '';
                        $.each(data, function (i, item) {
                            str += item.guid + ",";
                        });
                        layer.confirm('确定要执行批量删除吗？', function (index) {
                            layer.close(index);
                            var loadindex = layer.load(1, {
                                shade: [0.1, '#000']
                            });
                            os.ajax('api/shop/goods/delete/', { parm: str }, function (res) {
                                layer.close(loadindex);
                                if (res.statusCode === 200) {
                                    active.reload();
                                    os.success('删除成功！');
                                } else {
                                    os.error(res.message);
                                }
                            });
                        });

                    },
                    goModify: function (parm = '') {
                        var winH = $(window).height(), winW = $(window).width();
                        layuiIndex = os.OpenRight('商品管理', "/fytadmin/shop/goodsmodify?guid=" + parm + "&pid=" + vm.m.id, winW+ 'px', winH - 61 + 'px', function () {
                            if (parseInt($("#isSave").val()) === 1) {
                                $("#isSave").val('0');
                                active.reload();
                            }
                        }, function () {
                            active.closeCloumnModify();
                        });
                    },
                    closeCloumnModify: function () {
                        var $layero = $('#layui-layer' + layuiIndex);
                        $layero.animate({
                            left: $layero.offset().left + $layero.width()
                        }, 300, function () {
                            layer.close(layuiIndex);
                        });
                        return false;
                    },
                };
                $('.list-search .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
                //监听工具条
                table.on('tool(tool)', function (obj) {
                    var data = obj.data;
                    var winH = $(window).height(), winW = $(window).width();
                    layuiIndex = os.OpenRight('商品管理', "/fytadmin/shop/goodsmodify?guid=" + data.guid + "&pid=" + vm.m.id, winW + 'px', winH - 61 + 'px', function () {
                        if (parseInt($("#isSave").val()) === 1) {
                            $("#isSave").val('0');
                            active.reload();
                        }
                    }, function () {
                        active.closeCloumnModify();
                    });
                });
            });
    </script>
    <script type="text/html" id="tool">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit"><i class="layui-icon"></i> 修改</a>
    </script>
    <script type="text/html" id="switchTpl">
        <input type="checkbox" name="status" value="{{d.guid}}" disabled lay-skin="switch" lay-text="ON|OFF" {{ d.status==1?'checked':''}}>
    </script>
</div>